<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Décorrecteur orthographique</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class="grey lighten-4">

    <nav>
        <div class="nav-wrapper blue">
            <a href="#" class="brand-logo center">Décorrecteur orthographique</a>

            <ul id="nav-mobile" class="hide-on-med-and-down right">
                <li><a class="modal-trigger" href="#about">À propos</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="row">

            <div class="col s6">
                <div class="card blue lighten-4">
                    <div class="card-content">
                        <span class="card-title">Texte à corriger</span>
                        <div class="input-field">
                            <textarea id="text-input" class="materialize-textarea"></textarea>
                            <label for="text-input">Texte à corriger</label>
                        </div>

                        <button class="btn orange waves-effect waves-light right" type="submit" name="action" onclick="correct()">
                            Corriger
                        </button>
                        &nbsp;
                    </div>
                </div>
            </div>

            <div class="col s6">
                <div class="card blue lighten-4">
                    <div class="card-content">
                        <span class="card-title">Texte corrigé</span>
                        <p id="text-output"></p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- About -->
    <div class="modal" id="about">
        <div class="modal-content">
            <h2>À propos</h2>
            <p>
                <em>Décorrecteur orthographique</em> est un outil permettant d'ajouter de nombeuses
                fautes d'ortographe à un texte initialement correct.<br/>

                Il est entièrement open-source (licence MIT):
                <a href="https://github.com/AdrienVannson/Decorrecteur">https://github.com/AdrienVannson/Decorrecteur</a>
                <br/>

                Pour fonctionner, <em>Décorrecteur orthographique</em> utilise la base de données
                <em>Lexique383</em>.
            </p>

            <p>Créé par Adrien VANNSON (contact: <a href="mailto:adrien.vannson@protonmail.com">adrien.vannson@protonmail.com</a>)</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Fermer</a>
        </div>
    </div>

    <script src="script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
